<script lang="ts" setup>
import type { SystemRoleApi } from '#/api/system/role';

import { computed, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';

import { Card, Tabs } from 'ant-design-vue';

import AssignDataPermissionTable from './modules/assign-data-permission-table.vue';
import AssignMenuTable from './modules/assign-menu-table.vue';
import AssignUserTable from './modules/assign-user-table.vue';
import Form from './modules/form.vue';
import OperationPermission from './modules/operation-permission.vue';
import RoleTree from './modules/role-tree.vue';

// 修改表单
const [FormModal] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

// 菜单权限
const [AssignMenuTableModel] = useVbenModal({
  connectedComponent: AssignMenuTable,
  destroyOnClose: true,
});

// 数据权限
const [AssignDataPermissionTableModel] = useVbenModal({
  connectedComponent: AssignDataPermissionTable,
  destroyOnClose: true,
});

// 角色用户
const [AssignUserTableModel] = useVbenModal({
  connectedComponent: AssignUserTable,
  destroyOnClose: true,
});
// 业务权限
const [OperationPermissionModel] = useVbenModal({
  connectedComponent: OperationPermission,
  destroyOnClose: true,
});
const activeKey = ref('afterSale');

/** 选择角色 */
const searchRoleId = ref<number | undefined>(undefined);
const selectedRole = ref<null | SystemRoleApi.Role>(null);

async function handleRoleSelect(role: SystemRoleApi.Role) {
  searchRoleId.value = role.id;
  selectedRole.value = role;
}

const noRoleSelected = computed(() => !searchRoleId.value);

function handleTabChange(key: any) {
  activeKey.value = key;
}

// 右侧自动计算屏幕高度
const heightRight = computed(() => {
  return window.innerHeight - 233;
});

// 左侧角色列标配计算屏幕高度
const heightLeft = computed(() => {
  return window.innerHeight - 180;
});
</script>

<template>
  <Page auto-content-height>
    <FormModal />
    <div class="flex h-full w-full">
      <!-- 左侧部门树 -->
      <Card class="mr-4 h-full w-1/6">
        <div :style="{ height: `${heightLeft}px` }" style="overflow: auto">
          <RoleTree @select="handleRoleSelect" />
        </div>
      </Card>

      <!-- 右侧用户列表 -->
      <div class="mr-4 h-full w-5/6">
        <Card>
          <Tabs :active-key="activeKey" @change="handleTabChange">
            <Tabs.TabPane tab="菜单权限" key="afterSale" :force-render="true" />
            <Tabs.TabPane tab="数据权限" key="delivery" :force-render="true" />
            <Tabs.TabPane
              tab="用户信息"
              key="userInformation"
              :force-render="true"
            />
            <Tabs.TabPane
              tab="业务权限"
              key="businessPermission"
              :force-render="true"
            />
          </Tabs>

          <template v-if="noRoleSelected">
            <div style="padding: 20px; color: #999; text-align: center">
              请先选择角色
            </div>
          </template>

          <template v-else>
            <div :style="{ height: `${heightRight}px` }" style="overflow: auto">
              <AssignMenuTableModel
                v-if="activeKey === 'afterSale'"
                :role="selectedRole"
              />

              <AssignDataPermissionTableModel
                v-if="activeKey === 'delivery'"
                :role="selectedRole"
              />
              <AssignUserTableModel
                v-if="activeKey === 'userInformation'"
                :role="selectedRole"
              />
              <OperationPermissionModel
                v-if="activeKey === 'businessPermission'"
                :role="selectedRole"
              />
            </div>
          </template>
        </Card>
      </div>
    </div>
  </Page>
</template>
